<template>
  <div class="xiaofei">
    <div class="top">
      <div class="block">
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="请选择日期 ~ 请选择日期"
        >
        </el-date-picker>
      </div>
      <div class="opt">
        <el-cascader
          v-model="value2"
          placeholder="请选择科室"
          :options="options"
          @change="handleChange"
        ></el-cascader>
      </div>
      <el-input
        v-model="input"
        placeholder="请输入病人姓名/就诊卡号"
      ></el-input>
      <el-button type="primary" @click="onSearch">搜索</el-button>
    </div>
    <div class="table">
      <el-table
        height="500"
        ref="multipleTable"
        :data="priceData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :cell-style="{ 'text-align': 'center', 'font-size': ' 12px' }"
        :header-cell-style="{ 'text-align': 'center', 'font-size': ' 12px' }"
      >
        <el-table-column type="selection" width="50"> </el-table-column>
        <el-table-column
          prop="yuyue"
          label="操作时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="order"
          label="订单号"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="患者姓名"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="card"
          label="就诊卡号"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="source"
          label="来源"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="type"
          label="业务类型"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="feiyong"
          label="费用类型"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="pay"
          label="支付方式"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="price"
          label="支付金额"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="jiaofei"
          label="缴费状态"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column label="操作" width="137px">
          <template slot-scope="scope">
            <!-- <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="onEdit(scope.row)"
            ></el-button> -->
            <el-button type="primary" icon="el-icon-edit" circle @click="onEdit(scope.row)"
              ></el-button
            >

            <el-dialog
              title="提示"
              :visible.sync="dialogVisible"
              width="50%"
              :before-close="handleClose"
            >
            <inform :inform1="inform1"></inform>
              
              <span slot="footer" class="dialog-footer">
                <el-button @click=" dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false"
                  >确 定</el-button
                >
              </span>
            </el-dialog>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="onDel(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <page></page>
    
  </div>
</template>

 <script>
import page from "@/views/admin/children/yh/common/page.vue";
import inform from "@/views/admin/children/yh/common/inform.vue";
import {
  getAdminYhApi,
  getAdminSearch,
  getAdminDel,
} from "@/api/adminApi/yhApi";

export default {
  components: {
    page,
    inform,
  },
  data() {
    return {
      dialogVisible: false,
      page: 1,
      priceData: [],
      value1: "",
      value2: [],
      inform1:null,
      options: [
        {
          label: "内科",
          children: [
            { label: "消化内科" },
            { label: "血液内科" },
            { label: "风湿免疫内科" },
            { label: "肾内科" },
          ],
        },
        {
          label: "外科",
          children: [
            { label: "消化内科" },
            { label: "血液内科" },
            { label: "风湿免疫内科" },
            { label: "肾内科" },
          ],
        },
      ],
      input: "",
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    async onSearch() {
      let ret = await getAdminSearch({ name: this.input });
      // console.log(ret);
      this.priceData = [];
      this.priceData.push(ret);
    },
    async onDel(id) {
      let ret1 = await getAdminDel({ id });
      this.priceData = ret1;
    },
    async onEdit(row) {
      this.inform1 =row;
      console.log(this.inform1,'lll')
      this.dialogVisible = true
      
    },
    // async quxiao(row){
    //   this.dialogVisible = false;
    // }
  
  },
  async mounted() {
    let ret = await getAdminYhApi(this.page);
    if (ret.data.length > 0) {
      this.priceData = ret.data;
      // console.log(this.prciceData);
    } else {
      this.$message.error("暂无数据");
    }
  },
};
</script>

<style lang="scss" scoped>
@import "./scss/index.scss";
</style>